<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带参数过滤器：格式化日期</title>
</head>
<body>
<div id="app">
    <div>{{date}}</div>
    <div>{{date | format("yyyy-MM-dd")}}</div>
    <div>{{date | format("yyyy-MM-dd hh:mm:ss")}}</div>
</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    /*过滤器案例：格式化日期*/
    // Vue.filter("format", function (val, arg1) {
    //     var ret = "";
    //     if (arg1 == "yyyy-MM-dd") {
    //         ret += val.getFullYear() + "-" + val.getMonth() + "-" + val.getDate();
    //     } else if (arg1 == "yyyy-MM-dd hh:mm:ss") {
    //         ret += val.getFullYear() + "-" + val.getMonth() + "-" + val.getDate()+" "
    //             + val.getHours() + ":" + val.getMinutes() + ":" + val.getSeconds();
    //     }
    //     return ret;
    // })

    Vue.filter("format", function (val, arg1) {
        //格式化字符串
        function dateFormat(date, format) {
            if (typeof date == "string") {
                var mts = date.match(/(\/Date\((\d+)\/)/);
                if (mts && mts.length >= 3) {
                    date = parseInt(mts[2])
                }
            }
            date = new Date(date);
            if (!date || date.toUTCString() == "Invalid Date") {
                return "";
            }
            var map = {
                "M": date.getMonth() + 1, //月份
                "d": date.getDate(), //日
                "h": date.getHours(), //小时
                "m": date.getMinutes(), //分
                "s": date.getSeconds(), //秒
                "q": Math.floor((date.getMonth() + 3) / 3), //季度
                "S": date.getMilliseconds(), //毫秒
            };

            format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                var v = map[t];
                if (v != undefined) {
                    if (all.length > 1) {
                        v = '0' + v;
                        v = v.substr(v.length - 2);
                    }
                    return v;
                } else if (t == 'y') {
                    return (date.getFullYear() + "").substr(4 - all.length);
                }
                return all;
            });
            return format;
        }

        return dateFormat(val, arg1);
    })

    var vue = new Vue({
        el: "#app",
        data: {
            date: new Date()
        },
        methods: {}
    })
</script>
</body>
</html>
